<template>
  <div class="leave-apply-wrapper">
    <div class="leave-apply-header-wrapper">
      <div class="leave-apply-header-search-wrapper">
        <span class="leave-apply-header-progress-selector-span">审批状态 : </span>
        <el-select class="leave-apply-header-progress-selector"
                   v-model="selectedProgress"
                   @change="onSelectedProgressChanged"
                   placeholder="请选择审批状态">
          <el-option
                  v-for="item in progress"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="leave-apply-header-operation-wrapper">
        <el-button class="leave-apply-header-add-button"
                   icon="el-icon-plus"
                   @click="dialogFormVisible = true"
                   type="primary">请假申请</el-button>
      </div>
    </div>
    <div class="leave-apply-table-wrapper">
      <el-table
              class="leave-apply-table"
              v-loading="loading"
              element-loading-text="拼命加载中"
              :data="leaveRecords"
              :row-class-name="tableRowClassName">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="leave-table-expand">
              <el-form-item label="申请课程">
                <span>{{ props.row.course.name }}</span>
              </el-form-item>
              <el-form-item label="授课老师">
                <span>{{ props.row.teacher.name }}</span>
              </el-form-item>
              <el-form-item label="申请人">
                <span>{{ props.row.studentName }}</span>
              </el-form-item>
              <el-form-item label="请假时间">
                <span>{{ props.row.leaveTime }}</span>
              </el-form-item>
              <el-form-item label="审批状态">
                  <el-tag v-if="props.row.progress === 1"
                          type="info">待审批</el-tag>
                  <el-tag v-if="props.row.progress === 2"
                          type="success">已同意</el-tag>
                  <el-tag v-if="props.row.progress === 3"
                          type="danger">已拒绝</el-tag>
              </el-form-item>
              <el-form-item label="请假理由">
                <span>{{ props.row.reason }}</span>
              </el-form-item>
              <el-form-item label="教师留言">
                <span>{{ props.row.message }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
                prop="id"
                label="编号"
                width="110">
        </el-table-column>
        <el-table-column
                prop="course.name"
                label="申请课程"
                width="230">
        </el-table-column>
        <el-table-column
                prop="teacher.name"
                label="授课老师"
                width="200">
        </el-table-column>
        <el-table-column
                prop="leaveTime"
                label="请假时间"
                width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.leaveTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="progress"
                label="审批状态">
          <template slot-scope="props">
            <el-tag v-if="props.row.progress === 1"
                    effect="dark"
                    type="info">待审批</el-tag>
            <el-tag v-if="props.row.progress === 2"
                    effect="dark"
                    type="success">已同意</el-tag>
            <el-tag v-if="props.row.progress === 3"
                    effect="dark"
                    type="danger">已拒绝</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="leave-apply-table-pagination-wrapper">
        <el-pagination
                background
                @current-change="currentChange"
                @size-change="sizeChange"
                layout="sizes, prev, pager, next, jumper, ->, total, slot"
                :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog class="dialog"
               width="50%"
               title="请假申请"
               :visible.sync="dialogFormVisible">
      <div class="dialog-form-wrapper">
        <el-form class="dialog-form"
                 :rules="rules"
                 :model="leaveApply"
                 ref="leaveFrom">
          <el-row>
            <el-col :span="12">
              <el-form-item label="申请课程:" prop="courseId">
                <el-select v-model="leaveApply.courseId"
                           @change="onCourseChanged"
                           placeholder="请选择课程">
                  <el-option
                          v-for="item in courses"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授课老师:" prop="teacherId">
                <el-select v-model="leaveApply.teacherId"
                           placeholder="请选择老师">
                  <el-option
                          v-for="item in teachers"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="请假时间:" prop="leaveTime">
                  <el-date-picker
                          v-model="leaveApply.leaveTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
                  </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="请假理由:" prop="reason">
                <el-input type="textarea"
                          :rows="3"
                          placeholder="请输入请假理由"
                          maxlength="180"
                          show-word-limit
                          v-model="leaveApply.reason">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendApply">提交申请</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "LeaApply",
    data() {
      return {
        apply: 3,
        loading: false,
        leaveRecords: [],
        studentIdByUser: null,
        dialogFormVisible: false,
        selectedProgress: '',
        currentPage: 1,
        total: 0,
        size: 10,
        teachers: [],
        courses: [],
        rules: {
          courseId: [{ required: true, message: '请选择申请课程', trigger: 'blur' }],
          teacherId: [{ required: true, message: '请选择授课老师', trigger: 'blur' }],
          leaveTime: [{ required: true, message: '请选择请假时间', trigger: 'blur' }],
          reason: [{ required: true, message: '请填写请假理由', trigger: 'blur' }]
        },
        leaveApply: {
          studentId: 1,
          studentName: '汪子洋',
          teacherId: null,
          courseId: null,
          leaveTime: '',
          reason: '',
          status: '待定',
          progress: 1
        },
        progress: [
          {
            id: 1,
            name: '待审批'
          },
          {
            id: 2,
            name: '已同意'
          },
          {
            id: 3,
            name: '已拒绝'
          }
        ]
      }
    },
    mounted() {
      this.initStudentIdByUser()
      this.getLeaveRecords()
      this.getCourses()
      this.getTeachers()
    },
    methods: {
      //  当header中progress的选择器变化时重新获取请假记录
      onSelectedProgressChanged() {
        this.loading = true
        this.getRequest('/leamanagement/apply/?currentPage=' + this.currentPage
            + '&size=' + this.size
            + '&studentId=' + this.studentIdByUser
            + '&progress=' + this.selectedProgress).then(resp => {
          if (resp) {
            this.leaveRecords = resp.data
            this.total = resp.total
          }
          this.loading = false
        })
      },
      //  根据progress指定每条记录的额外的样式
      tableRowClassName({row}) {
        if (row.progress === 1) {
          return '';
        } else if (row.progress === 2) {
          return 'success-row';
        } else if (row.progress === 3) {
          return 'warning-row';
        }
        return '';
      },
      //  获取请假记录
      getLeaveRecords() {
        this.loading = true
        this.getRequest('/leamanagement/apply/?currentPage=' + this.currentPage
            + '&size=' + this.size
            + '&studentId=' + this.studentIdByUser).then(resp => {
          if (resp) {
            this.leaveRecords = resp.data
            this.total = resp.total
          }
          this.loading = false
        })
      },
      //  当分页组件的每页显示多少条数据改变时
      sizeChange(size) {
        this.size = size
        this.currentPage = 1
        this.getLeaveRecords()
      },
      //  当分页组件的页数改变时
      currentChange(currentPage) {
        this.currentPage = currentPage
        this.getLeaveRecords()
      },
      //  获取所有老师
      getTeachers() {
        this.getRequest('/leamanagement/apply/teacher').then(resp => {
          if (resp) {
            this.teachers = resp
          }
        })
      },
      //  获取所有课程
      getCourses() {
        this.getRequest('/leamanagement/apply/course').then(resp => {
          if (resp) {
            this.courses = resp
          }
        })
      },
      //  根据课程id获取老师
      getTeachersByCourse() {
        this.getRequest('/leamanagement/apply/teacher/' + this.leaveApply.courseId).then(resp => {
          if (resp) {
            this.leaveApply.teacherId = ''
            this.teachers = resp
          }
        })
      },
      //  所选课程变化时
      onCourseChanged() {
        this.getTeachersByCourse()
      },
      //  发送请假申请
      sendApply() {
        this.$refs['leaveFrom'].validate((valid) => {
          if (valid) {
            //  MessageBox 弹框
            this.$confirm('此操作将提交请假申请给相应老师, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.postRequest('/leamanagement/apply/', this.leaveApply).then(resp => {})
              this.dialogFormVisible = false
              this.leaveApply = {
                studentId: 1,
                studentName: '汪子洋',
                teacherId: null,
                courseId: null,
                reason: '',
                leaveTime: '',
                status: '待定',
                progress: 1
              }
              this.getLeaveRecords()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
          }
        })
      },
      // sendApply() {
      //   this.$refs['leaveFrom'].validate((valid) => {
      //     if (valid) {
      //       //  MessageBox 弹框
      //       this.$confirm('此操作将提交请假申请给相应老师, 是否继续?', '提示', {
      //         confirmButtonText: '确定',
      //         cancelButtonText: '取消',
      //         type: 'warning'
      //       }).then(() => {
      //         this.postRequest('/leamanagement/apply/', this.leaveApply).then(resp => {
      //           if (resp) {
      //             this.dialogFormVisible = false
      //             console.log(this.dialogFormVisible)
      //             this.leaveApply = {
      //               studentId: 1,
      //               studentName: '汪子洋',
      //               teacherId: null,
      //               courseId: null,
      //               reason: '',
      //               leaveTime: '',
      //               status: '待定',
      //               progress: 1
      //             }
      //             this.getLeaveRecords()
      //           }
      //         })
      //       }).catch(() => {
      //         this.$message({
      //           type: 'info',
      //           message: '已取消删除'
      //         })
      //       })
      //     }
      //   })
      // },
      //  获取当前操作系统的学生的id
      initStudentIdByUser() {
        let user = JSON.parse(window.sessionStorage.getItem('user'))
        this.studentIdByUser = user.studentId
      }
    }
  }
</script>

<style lang="less">

  .leave-apply-wrapper {
    width: 97%;
    margin-top: 20px;
    margin-left: 40px;

    .leave-apply-header-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      box-sizing: border-box;
      padding: 20px 40px;
      /*background-color: #EBEEF5;*/
      height: 80px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
      border-radius: 4px;
      
      .leave-apply-header-search-wrapper {

        .leave-apply-header-progress-selector-span {
          font-size: 18px;
        }

        .leave-apply-header-progress-selector {
          width: 180px;
        }
      }

      .leave-apply-header-operation-wrapper {

        .leave-apply-header-add-button {

        }

        .leave-apply-header-delete-batch-button {

        }
      }
    }

    .leave-apply-table-wrapper {
      margin-top: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
      border-radius: 4px;
      padding: 5px 20px 20px 20px;

      .leave-apply-table {

        .leave-apply-table .warning-row {
          background: oldlace;
        }

        .leave-apply-table .success-row {
          background: #f0f9eb;
        }

        .leave-table-expand {
          font-size: 0;
          background-color: #F4F4F5;
          padding: 20px;
        }

        .leave-table-expand label {
          width: 90px;
          color: #99a9bf;
        }
        .leave-table-expand .el-form-item {
          margin-right: 0;
          margin-bottom: 0;
          width: 50%;
        }
      }

      .leave-apply-table-pagination-wrapper {
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
  .el-table .warning-row {
    background: #fef0f0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>